<template>
  <section class="outer">
    <div class="pack">
      <div class="synopsis-top">
        <h3 class="synopsis-h3">目录</h3>
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="第一章 打工人" name="1">
          <router-link to="/" class="reda-a">
            该我了且听我种种疯狂故事中的一个 ——兰波
            房间里很吵，几乎是每个人都在声嘶力竭地为自己辩解。吴虑呆坐在椅子上，半晌后木然地抄起桌上的笔，在笔录上签了字，算是对自己的‘罪行’供认不讳。随后她被领进了一个房间，就像电视里演得那般，三面都是墙，剩下的一面…
          </router-link>
        </el-collapse-item>
        <el-collapse-item title="第二章 背锅侠" name="2">
          <router-link to="/" class="reda-a">
            吴虑是几乎是被周新颜赶出办公室的，周新颜非常生气，怒斥她忘恩负义，狼心狗肺，品行不端，而她绝不会再顾及往昔的情面，要秉公处理这件事……但其实，周新颜是心虚的，剧本是她改的，钱也是她拿的，吴虑太不懂变通了，商务和制片人已经暗示到那份上了，她却死守着没有用的底线，一点镜头和台词都不肯多给，最后只逼得她亲自上手。这在业内原本是再平常不过的事情了，先前她也没少有过类似的操作，有时是商务、制片主动提出的，有时则是她故意发难说某个产品跟剧集的整体风格不搭。可谁能想到，这次竟然会翻车，周新颜心里的‘卧槽’弹…</router-link
          >
        </el-collapse-item>
        <el-collapse-item title="第三章 老头乐" name="3">
          <div>
            夜很深了，派出所里依旧是人头攒动。吴虑跟在警察的身后，有些茫然地四处打望。她在找徐沛然，也在找吴忧。方才的重逢和分开都太突然，纵是她不愿意承认，但她和吴忧，是有着不能被切断的联系的。正恍惚着，突然，斜前方，不远处，一个身影撞进了吴虑的视线里。那是一…
          </div>
        </el-collapse-item>
        <el-collapse-item title="第四章 龙凤胎" name="4">
          <div>
            吴虑想劝吴忧适可而止，跟父母和解，但转念一想，又找不到立场。毕竟他走后没几年，她为了所谓的编剧梦，跟爸妈闹得很不开心，去年过年，她干脆也没回家。沉思时，吴忧先开了口，“怎么？这就准备走了，这么些年没见，没什么话要跟兄长说吗？”“我……”吴虑低头，顺…
          </div>
        </el-collapse-item>
        <el-collapse-item title="第五章 莫回头" name="5">
          <div>
            徐沛然是以见客户的名义偷跑出来的，只待了一会儿，便离开了。又过了一会儿，吴虑接到派出所打来的电话，她强打起精神，换好衣服，出了门。民警叫她去跟何煦进行调解，可正如徐沛然料想的一般，何煦狮子大开口，提出要五万元的赔偿金。吴虑见他故意用纱布把胳膊包扎起…
          </div>
        </el-collapse-item>
      </el-collapse>
      <a href="" class="synopsis-aa">查看全部目录</a>
    </div>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>
<style lang="scss">
.outer {
  width: 1200px;
  margin: 0 auto;
  .pack {
    width: 810px;
    margin: 0 auto;
    .synopsis-top {
      width: 100%;
      height: 33px;
      box-sizing: border-box;
      padding: 10px 13px;
      background-color: #eff2f3;
      .synopsis-h3 {
        font-size: 13px;
        color: #333;
      }
    }
  }
}
.reda-a {
  color: #333;

  // padding: 20px;
}
.reda-a:hover {
  color: #333;
}
.synopsis-aa {
  display: block;
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 15px 0;
  color: #389eac;
}
.synopsis-aa:hover {
  color: #389eac;
}
</style>